<template>
	<view v-if="isTester" class="test-box">
		<view class="test-btn" @click="handleOpenSetting">
			<u-icon name="setting-fill" color="#fff" size="40"></u-icon>
		</view>
		<u-modal v-model="visibleSetting" @confirm="handleOk" :show-title="false">
			<u-cell-group style="margin-top:15px;">
				<u-cell-item title="开启学习测试模式" :arrow="false">
					<u-switch v-model="studyStore.tester.isTestMode" :size="40"></u-switch>
				</u-cell-item>
				<u-cell-item title="句子ID" :arrow="false">
					<u-input v-model="inputValue"></u-input>
				</u-cell-item>
			</u-cell-group>
		</u-modal>
	</view>
</template>


<script lang="ts" setup>
	import { onShow } from '@dcloudio/uni-app';
	import { onMounted, ref } from 'vue';
	import { ktluser } from '@/utils';
	import { useStudyStore } from '@/store/study';
	
	/** 课程列表：测试工具 */
	defineOptions({ name: 'class-tester', inheritAttrs: false });
	
	const emit = defineEmits(['re-test']);
	
	const studyStore = useStudyStore();
	const isTester = ref(false);
	const visibleSetting = ref(false);
	const isReviewTestMode = ref(false);
	const inputValue = ref('');
	
	/** 打开测试配置工具 */
	const handleOpenSetting = () => {
		visibleSetting.value = true;
	}
	
	const handleOk = () => {
		visibleSetting.value = false;
		if (inputValue.value) {
			emit('re-test', inputValue.value)
		}
	}
	
	onShow(() => {
		const user = ktluser.getUser(false);
		isTester.value = Boolean(user.IsTester);
	})
</script>

<style>
	.test-btn{
		position: fixed;
		z-index: 5;
		right: 15px;
		bottom: 80px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: red;
		color: aliceblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.step-item{
		width: 50%;
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}
	.label{
		margin-right: 4px;
	}
</style>